<template>
  <view class="dashboard-container">
    <!-- 顶部欢迎区域 -->
    <view class="dashboard-header">
      <view class="welcome-section">
        <view class="welcome-text">
          <text class="welcome-title">中恒智建云</text>
          <text class="welcome-subtitle">智能监控与管理平台</text>
        </view>
        <image class="header-logo" src="@/static/images/logo.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 统计卡片区域 -->
    <view class="stats-section">
      <view class="stats-title">
        <text class="title-text">设备概览</text>
        <text class="title-desc">实时监控设备状态</text>
      </view>
      <scroll-view class="stats-scroll" scroll-x="true" show-scrollbar="false">
        <view class="stats-grid">
          <view class="stat-card" v-for="(stat, index) in stats" :key="index" :style="{ backgroundColor: stat.color }">
            <view class="stat-icon">
              <text class="iconfont" :class="stat.icon"></text>
            </view>
            <view class="stat-content">
              <text class="stat-value">{{ stat.value }}</text>
              <text class="stat-label">{{ stat.label }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 图表区域 -->
    <view class="charts-section">
      <view class="chart-container">
        <view class="chart-header">
          <text class="chart-title">设备投运趋势</text>
          <view class="chart-tabs">
            <text class="tab-item" :class="{ active: activeTab === 'month' }" @click="switchTab('month')">月度</text>
            <text class="tab-item" :class="{ active: activeTab === 'year' }" @click="switchTab('year')">年度</text>
          </view>
        </view>
        <view class="chart-content">
          <canvas canvas-id="trendChart" class="chart-canvas" @touchstart="onChartTouch"></canvas>
        </view>
      </view>
    </view>

    <!-- 设备排行区域 -->
    <view class="ranking-section">
      <view class="ranking-header">
        <text class="ranking-title">热门设备排行</text>
        <text class="ranking-subtitle">按使用频率排序</text>
      </view>
      <view class="ranking-list">
        <view class="ranking-item" v-for="(item, index) in rankingData" :key="index" @click="viewDeviceDetail(item)">
          <view class="rank-number"
            :class="'rank-' + (index === 0 ? 'first' : index === 1 ? 'second' : index === 2 ? 'third' : 'normal')">
            <text class="rank-text">{{ index + 1 }}</text>
          </view>
          <view class="device-info">
            <text class="device-name">{{ item.name }}</text>
            <text class="device-type">{{ item.type }}</text>
          </view>
          <view class="device-stats">
            <text class="usage-count">{{ item.usageCount }}次</text>
            <text class="usage-trend" :class="item.trend > 0 ? 'up' : 'down'">
              {{ item.trend > 0 ? '↗' : '↘' }} {{ Math.abs(item.trend) }}%
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷操作区域 -->
    <view class="quick-actions">
      <view class="action-title">
        <text class="title-text">快捷操作</text>
      </view>
      <view class="action-grid">
        <view class="action-item" v-for="(action, index) in quickActions" :key="index"
          @click="handleQuickAction(action)">
          <view class="action-icon" :style="{ backgroundColor: action.color }">
            <text class="iconfont" :class="action.icon"></text>
          </view>
          <text class="action-label">{{ action.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'month',
      stats: [
        { label: '总设备数', value: 128, icon: 'icon-equipment', color: '#409EFF' },
        { label: '在线设备', value: 95, icon: 'icon-online', color: '#67C23A' },
        { label: '维修中', value: 8, icon: 'icon-repair', color: '#E6A23C' },
        { label: '待检修', value: 15, icon: 'icon-maintenance', color: '#F56C6C' },
        { label: '闲置设备', value: 10, icon: 'icon-idle', color: '#909399' }
      ],
      rankingData: [
        { name: '旋挖钻机 SR285R', type: '重型机械', usageCount: 156, trend: 12.5 },
        { name: '液压打桩锤 YZ-200', type: '打桩设备', usageCount: 142, trend: 8.3 },
        { name: '履带式打桩机 ZYJ-400', type: '打桩设备', usageCount: 128, trend: -2.1 },
        { name: '静力压桩机 JZJ-1200', type: '压桩设备', usageCount: 115, trend: 15.7 },
        { name: '柴油锤打桩机 CX-150', type: '打桩设备', usageCount: 98, trend: 5.2 }
      ],
      quickActions: [
        { label: '设备监控', icon: 'icon-monitor', color: '#409EFF', action: 'monitor' },
        { label: '维修管理', icon: 'icon-repair', color: '#E6A23C', action: 'repair' },
        { label: '数据统计', icon: 'icon-chart', color: '#67C23A', action: 'statistics' },
        { label: '系统设置', icon: 'icon-setting', color: '#909399', action: 'settings' }
      ]
    }
  },
  onLoad() {
    this.initChart()
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab
      this.updateChart()
    },
    initChart() {
      // 初始化图表
      this.updateChart()
    },
    updateChart() {
      // 更新图表数据
      const ctx = uni.createCanvasContext('trendChart', this)
      const data = this.activeTab === 'month' ? [8, 12, 10, 15, 18, 14, 13, 16, 20, 19, 22, 8] : [120, 135, 128, 145, 158, 142, 133, 156, 180, 169, 182, 128]

      // 绘制简单的柱状图
      ctx.clearRect(0, 0, 300, 200)
      ctx.setFillStyle('#409EFF')

      data.forEach((value, index) => {
        const x = index * 25 + 10
        const height = (value / Math.max(...data)) * 150
        const y = 180 - height

        ctx.fillRect(x, y, 20, height)
      })

      ctx.draw()
    },
    onChartTouch(e) {
      // 处理图表交互
      console.log('Chart touched:', e)
    },
    viewDeviceDetail(device) {
      uni.showToast({
        title: `查看${device.name}详情`,
        icon: 'none'
      })
    },
    handleQuickAction(action) {
      switch (action.action) {
        case 'monitor':
          uni.navigateTo({ url: '/pages/monitor/index' })
          break
        case 'repair':
          uni.navigateTo({ url: '/pages/equipment/index' })
          break
        case 'statistics':
          uni.navigateTo({ url: '/pages/production/index' })
          break
        case 'settings':
          uni.navigateTo({ url: '/pages/system/index' })
          break
        default:
          uni.showToast({
            title: `打开${action.label}`,
            icon: 'none'
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20rpx;
}


.dashboard-header {
  margin-bottom: 30rpx;

  .welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);

    .welcome-text {
      flex: 1;

      .welcome-title {
        display: block;
        font-size: 48rpx;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 10rpx;
      }

      .welcome-subtitle {
        display: block;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .header-logo {
      width: 120rpx;
      height: 120rpx;
    }
  }
}

.stats-section {
  margin-bottom: 30rpx;

  .stats-title {
    margin-bottom: 20rpx;

    .title-text {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }

    .title-desc {
      font-size: 24rpx;
      color: #666;
    }
  }

  .stats-scroll {
    white-space: nowrap;
  }

  .stats-grid {
    display: inline-flex;
    gap: 20rpx;
    padding: 0 10rpx;
  }

  .stat-card {
    min-width: 200rpx;
    height: 160rpx;
    border-radius: 16rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    .stat-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;

      .iconfont {
        font-size: 40rpx;
        color: #ffffff;
      }
    }

    .stat-content {
      flex: 1;

      .stat-value {
        display: block;
        font-size: 48rpx;
        font-weight: bold;
        color: #ffffff;
        line-height: 1;
        margin-bottom: 8rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}

.charts-section {
  margin-bottom: 30rpx;

  .chart-container {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

    .chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .chart-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .chart-tabs {
        display: flex;
        background: #f5f5f5;
        border-radius: 8rpx;
        padding: 4rpx;

        .tab-item {
          padding: 12rpx 24rpx;
          font-size: 24rpx;
          color: #666;
          border-radius: 6rpx;
          transition: all 0.3s;

          &.active {
            background: #409EFF;
            color: #ffffff;
          }
        }
      }
    }

    .chart-content {
      height: 300rpx;

      .chart-canvas {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.ranking-section {
  margin-bottom: 30rpx;

  .ranking-header {
    margin-bottom: 20rpx;

    .ranking-title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }

    .ranking-subtitle {
      font-size: 24rpx;
      color: #666;
    }
  }

  .ranking-list {
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

    .ranking-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .rank-number {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;

        &.rank-first {
          background: linear-gradient(135deg, #ffd700, #ffed4e);
        }

        &.rank-second {
          background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
        }

        &.rank-third {
          background: linear-gradient(135deg, #cd7f32, #daa520);
        }

        &.rank-normal {
          background: #f5f5f5;
        }

        .rank-text {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }
      }

      .device-info {
        flex: 1;

        .device-name {
          display: block;
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }

        .device-type {
          font-size: 24rpx;
          color: #666;
        }
      }

      .device-stats {
        text-align: right;

        .usage-count {
          display: block;
          font-size: 28rpx;
          font-weight: bold;
          color: #409EFF;
          margin-bottom: 8rpx;
        }

        .usage-trend {
          font-size: 24rpx;

          &.up {
            color: #67C23A;
          }

          &.down {
            color: #F56C6C;
          }
        }
      }
    }
  }
}


.quick-actions {
  .action-title {
    margin-bottom: 20rpx;

    .title-text {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 20rpx;
      background: #ffffff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      transition: transform 0.3s;

      &:active {
        transform: scale(0.95);
      }

      .action-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;

        .iconfont {
          font-size: 36rpx;
          color: #ffffff;
        }
      }

      .action-label {
        font-size: 24rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .stats-grid {
    .stat-card {
      min-width: 180rpx;
      height: 140rpx;
      padding: 16rpx;

      .stat-icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 16rpx;

        .iconfont {
          font-size: 32rpx;
        }
      }

      .stat-content {
        .stat-value {
          font-size: 40rpx;
        }

        .stat-label {
          font-size: 22rpx;
        }
      }
    }
  }

  .action-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;

    .action-item {
      padding: 24rpx 16rpx;

      .action-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 12rpx;

        .iconfont {
          font-size: 28rpx;
        }
      }

      .action-label {
        font-size: 22rpx;
      }
    }
  }

  .ranking-item {
    padding: 24rpx;

    .rank-number {
      width: 50rpx;
      height: 50rpx;
      margin-right: 16rpx;

      .rank-text {
        font-size: 24rpx;
      }
    }

    .device-info {
      .device-name {
        font-size: 26rpx;
      }

      .device-type {
        font-size: 22rpx;
      }
    }

    .device-stats {
      .usage-count {
        font-size: 26rpx;
      }

      .usage-trend {
        font-size: 22rpx;
      }
    }
  }
}
</style>
